<script>
import GSAP from "@/components/GSAP.vue";

export default {
    name: "TalentsSearch",
    components: {GSAP},
    data() {
        return {
            toggle: false,
        }
    },
    mounted() {
        setInterval(() => {
            this.toggle = !this.toggle
        }, 3000)
    }
}
</script>

<template>
    <div class="talents-container">
        <div class="circle-box">
            <div class="center"></div>

            <div class="addition addition-1">地区</div>
            <div class="animation animation-1">
                <GSAP :toggle="toggle"
                      :item-style="{left: '50%', top: '30%', transform: 'translate(-50%, -70%)', transformOrigin: 'left bottom'}"
                      :config="[{x: 220, scale: 0.45}, {x: 20, scale: 1}]"
                ></GSAP>
            </div>

            <div class="addition addition-2">技能<br>背景</div>
            <div class="animation animation-2">
                <GSAP :toggle="toggle"
                      :item-style="{left: '50%', top: '10%', transform: 'translate(-50%, -90%)', transformOrigin: 'center'}"
                      :config="[{y: 40, scale: 0.45}, {y: -50, scale: 1}]"
                ></GSAP>
            </div>

            <div class="addition addition-3">标签</div>
            <div class="animation animation-3">
                <GSAP :toggle="toggle"
                      :item-style="{left: '-30%', top: '0', transform: 'translate(-70%, -20%)'}"></GSAP>
            </div>

            <div class="addition addition-4">能力<br>整数</div>
            <div class="animation animation-4">
                <GSAP :toggle="toggle"
                      :item-style="{left: '50%', top: '50%', transform: 'translate(-50%, -50%)', transformOrigin: 'left center'}"
                      :config="[{x: -70, scale: 0.45}, {x: 30, scale: 1}]"
                ></GSAP>
            </div>

            <div class="addition addition-5">考勤</div>
            <div class="animation animation-5">
                <GSAP :toggle="toggle"
                      :item-style="{left: '-20%', top: '70%', transform: 'translate(20%, -30%)', transformOrigin: 'left top'}"
                      :config="[{x: -70, scale: 0.45}, {x: 30, scale: 1}]"
                ></GSAP>
            </div>

            <div class="addition addition-6">基本<br>信息</div>
            <div class="animation animation-6">
                <GSAP :toggle="toggle"
                      :item-style="{left: '50%', top: '70%', transform: 'translate(-50%, -30%)', transformOrigin: 'center'}"
                      :config="[{y: -100, scale: 0.45}, {y: -10, scale: 1}]"
                ></GSAP>
            </div>

            <div class="addition addition-7">工作<br>经历</div>
            <div class="animation animation-7">
                <GSAP :toggle="toggle"
                      :item-style="{left: '35%', top: '70%', transform: 'translate(-65%, -30%)', transformOrigin: 'right top'}"
                      :config="[{x: 60, scale: 0.45}, {x: -40, scale: 1}]"
                ></GSAP>
            </div>

            <div class="addition addition-8">条线</div>
            <div class="animation animation-8">
                <GSAP :toggle="toggle"
                      :item-style="{left: 0, top: '50%', transform: 'translate(0, -50%)', transformOrigin: 'left center'}"
                      :config="[{x: 180, scale: 0.45}, {x: -20, scale: 1}]"
                ></GSAP>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
@radius: 200px;
@additionPadding: 0;
@centerRadius: 120px;
@additionRadius: 100px;
@angle: 360deg / 8;
@animationSize: 200px;

.talents-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    user-select: none;
    background: #f2f3f5;

    .circle-box {
        width: calc(2 * (@radius + @additionPadding + @animationSize));
        height: calc(2 * (@radius + @additionPadding + @animationSize));
        position: relative;
        scale: 1;

        .center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: @centerRadius;
            height: @centerRadius;
            border-radius: 50%;
            background: #ef3a2b;
        }

        .addition {
            position: absolute;
            left: 50%;
            top: 50%;
            width: @additionRadius;
            height: @additionRadius;
            border-radius: 50%;
            background: linear-gradient(#ff9293, #ff3636);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            font-weight: 600;
            box-shadow: 0 2px 12px 0 #ff9293;
            font-size: 24px;
            letter-spacing: 2px;
        }

        .animation {
            position: absolute;
            left: 50%;
            top: 50%;
            width: @animationSize;
            height: @animationSize;
        }


        .loop(@n, @i: 1) when (@i <= @n) {
            .addition-@{i} {
                transform: translate(-50% + (@radius * cos(@i * @angle)), -50% + (@radius * sin(@i * @angle)));
            }

            .animation-@{i} {
                transform: translate(-50% + (@radius * cos(@i * @angle)), -50% + (@radius * sin(@i * @angle)));
            }

            .loop(@n, (@i + 1));
        }

        .loop(8);
    }
}
</style>